<template>
  <div class="pagss">
    <Navv></Navv>

    <el-row :gutter="20" style="margin-right: 5px;">
      <el-col :span="4">
        <!-- 侧边导航++++++++++++++++++++++ -->
        <Sidebar defaultActive='1'></Sidebar>
        <!-- 侧边导航=============== -->
      </el-col>


      <el-col :span="20">
        <el-row>
          <el-col :span="24">
            <div class="panel-group1">
              <!-- 进度条+++++++ -->
              <div class="row_a_c">
                <div class=" flex-col ">
                  <div class=" flex-row">
                    <div class="text-wrapper_2 flex-col ">
                      <span class="text_9 center">1</span>
                    </div>
                    <div style="margin-top: 5px;">
                      <span class="text_10">创建游戏版本</span>
                      <div class="mt_5 ml_10 ">版本ID：{{this.appid}}</div>
                    </div>

                    <div class="group_3 flex-col"></div>
                    <div class="text-wrapper_3 flex-col">
                      <span class="text_11 center">2</span>
                    </div>

                    <div style="width: 90px;margin-top: 5px;">
                      <span class="text_10">开发&完善信息</span>
                      <div style="width: 310px;" class="mt_5 ml_10 ">
                        在线开发者工具进行开发、配置；完善类目、图标、简介等信息
                      </div>
                    </div>

                    <div class="group_4 flex-col"></div>
                    <div class="text-wrapper_4 flex-col">
                      <span class="text_13 center">3</span>
                    </div>

                    <div style="width: 90px;margin-top: 5px;">
                      <span class="text_14">审核&发布</span>
                      <div style="width: 310px;" class="mt_5 ml_10 ">去<span class="color_1A82FB">【开发-版本管理】</span>提交审核
                      </div>
                    </div>

                  </div>
                </div>
              </div>

              <!-- 进度条======== -->
            </div>

          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="24">
            <div class="panel-group2">
              <!-- 头+++++++++ -->
              <div class=" space-between ">
                <div>
                  <div class="f_15 f_bold">基本信息完善</div>
                  <div class="f_12 color_878787 mt_5">补充游戏基本信息,包括名称、图标、简介及版本等,可与开发同步进行</div>
                </div>

                <div class="row">
                  <!-- <div class="qwtx center" @click="toUrl('/center/personal')">
                  前往填写
                </div> -->
                  <div class="qwtx center" style="width: 100px;margin-left: 30px;" @click="toUrl('/center/test')">
                    原后台
                  </div>
                </div>
              </div>
              <!-- 头======= -->

              <div class="row mt_20">

                <div class="mr_40"><span style="color: red;">*</span>封面：</div>
                <div>


                  <el-upload :action="upload_url" :headers="headers" :before-upload="handleSetHeaders"
                    :on-success="handleFileSuccess" :show-file-list="false" class="avatar-uploader">
                    <img v-if="logo" :src="logo" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>

              <div class="row mt_20">
                <div><span style="color: red;">*</span>游戏名称：</div>
                <div><el-input style="width: 100%;" v-model="name" placeholder="请输入游戏名称"></el-input></div>
              </div>
              <div class="row mt_30">
                <div style="margin-left: 5px;">游戏版本：</div>
                <div><el-input disabled style="width: 100%;" v-model="appid" placeholder="请输入游戏版本"></el-input></div>
              </div>
              <el-button @click="submitForm" style="width: 120px;margin-left: 80px;margin-top: 30px;" type="primary">提交</el-button>
            </div>

          </el-col>
        </el-row>


        <!--        <el-row :gutter="20">
          <el-col :span="24">
            <div class="panel-group1 space-between center">
              <div>
                <div class="f_15 f_bold">配置域名</div>
                <div class="f_12 color_878787 mt_5">在“开发”中配置域名，否则无法正常访问服务器</div>
              </div>
              <div class="qwtx center">
                前往配置
              </div>
            </div>
          </el-col>
        </el-row> -->


        <!-- <el-row :gutter="20">
          <el-col :span="24">
            <div class="panel-group1 space-between center">
              <div>
                <div class="f_15 f_bold">流量配置</div>
                <div class="f_12 color_878787 mt_5">开发者根据自身情况，配置符合自身的流量入口，推广自己的游戏</div>
              </div>
              <div class="qwtx center">
                前往配置
              </div>
            </div>
          </el-col>
        </el-row> -->



      </el-col>
    </el-row>




  </div>
</template>

<script>
  import Navv from "@/components/Navv";
  import Sidebar from "@/components/Sidebar";
  import * as Auth from '@/utils/auth'
  import * as Game from "@/api/system/game";

  export default {
    name: 'Overview',
    components: {
      Navv,
      Sidebar
    },
    data() {
      return {
        upload_url: process.env.VUE_APP_BASE_URL + "/file/upload",
        headers: Auth.getHeader(),
        appid: '', //随机数，版本号
        logo: '',
        name: '',
        loading: false,
      }
    },
    created() {
      this.createCode(); //生成随机数
    },
    mounted() {

    },
    methods: {

      /** 提交按钮 */
      submitForm: function() {

        if(!this.logo){
          this.$message({
            message: '封面不能为空',
            type: 'warning'
          });
        }
        if(!this.name){
          this.$message({
            message: '游戏名称不能为倾家荡产',
            type: 'warning'
          });
        }

        var per ={
          logo:this.logo,
          appid:this.appid,
          name:this.name,
        }

        Game.Add(per).then(response => {
          this.toUrl('/center')
          this.$modal.msgSuccess("新增成功");

        });
      },

      handleSetHeaders() {
        this.headers = Auth.getHeader();
      },
      /****文件上传*****/
      handleFileSuccess(res) {
        this.logo = res.data;
      },

      //生成随机数
      createCode() {
        let code = ''; //声明一个空的字符串值用于后面赋值
        const codeLength = 16; //验证码的长度，可以根据个人需求改变
        const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
          'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
        ]; //随机数的取值范围
        for (let i = 0; i < codeLength; i++) {
          //循环遍历codeLength，值是几，就循环几次
          let index = Math.floor(Math.random() *
            36); //Math.floor方法用于返回小于或等于一个给定数字的最大整数；Math.random方法返回 0（含）和 1（不含）之间的随机数
          code += random[index]; //根据索引取得随机数加到code上
        }
        this.appid = code; //把code值赋给data中定义好的appid
      },

      toUrl(url) {
        this.$router.push({
          path: url
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #f4f6f9;
    // padding: 5px 0 15px 40px;
  }

  .panel-group1 {
    padding: 20px;
    margin-top: 18px;
    margin-bottom: 32px;
    height: 100px;
    background: #FFFFFF;
    box-shadow: 1px 5px 9px 1px rgba(180, 185, 242, 0.68);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .panel-group2 {
    padding: 20px;
    margin-top: 18px;
    margin-bottom: 32px;
    min-height: 300px;
    background: #FFFFFF;
    box-shadow: 1px 5px 9px 1px rgba(180, 185, 242, 0.68);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .lssx {
    width: 4px;
    height: 24px;
    background: #1A82FB;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }

  ::v-deep .el-input--medium .el-input__inner {
    background: #F0F3F8;
    border: 1px solid #F0F3F8;

  }

  ::v-deep .el-select .el-input .el-select__caret {
    color: #000000 !important;
  }

  ::v-deep .el-range-editor.el-input__inner {
    background: #F0F3F8;
  }

  ::v-deep .el-range-editor--medium .el-range-input {
    font-size: 14px;
    background: #F0F3F8;
    color: #000000;
  }

  ::v-deep .el-input__inner {
    border: 1px solid #F0F3F8;

  }

  ::v-deep .el-date-editor .el-range__icon {
    color: #000000;
  }


  ::v-deep .el-menu-item * {
    font-size: 18px;
    // margin-top: 20px;

  }



  .item_nav {
    margin-bottom: 20px !important;
  }

  ::v-deep .el-tabs__item {
    font-size: 18px;
    color: black;
    font-weight: bold;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #409EFF;
  }


  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #000000;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    background-color: #F4F4F5;
  }

  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }



  .search {

    ::v-deep .el-input__inner,
    ::v-deep .el-date-editor .el-range-input {
      &::placeholder {
        color: #000000;
      }

      &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #000000;
      }

      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #000000;
      }

      &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #000000;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #000000;
      }
    }
  }

  .itmebox {
    width: 150px;
  }

  .hjt {
    width: 9px;
    height: 19px;
    background: #D40000;
    opacity: 1;
  }



  .el-submenu__title * {
    font-size: 18px;

  }

  .el-submenu .el-menu-item {
    // margin-left: 20px;
    padding-left: 60px !important;
  }



  .text-wrapper_2 {
    background-color: rgba(26, 130, 251, 1);
    border-radius: 50%;
    height: 28px;
    width: 28px;
  }

  .text_9 {
    width: 8px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 8px 0 0 10px;
  }

  .text_10 {
    width: 107px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 6px 0 0 8px;
  }

  .group_3 {
    background-color: rgba(26, 130, 251, 1);
    width: 320px;
    height: 2px;
    margin: 15px 0 0 -80px;
  }

  .text-wrapper_3 {
    background-color: rgba(150, 149, 149, 1);
    border-radius: 50%;
    height: 28px;
    margin-left: 19px;
    width: 28px;
  }

  .text_11 {
    width: 9px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 8px 0 0 9px;
  }

  .text_12 {
    width: 72px;
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(150, 149, 149, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 6px 0 0 8px;
  }

  .group_4 {
    background-color: rgba(150, 149, 149, 1);
    width: 320px;
    height: 2px;
    margin: 15px 0 0 70px;
  }

  .text-wrapper_4 {
    background-color: rgba(150, 149, 149, 1);
    border-radius: 50%;
    height: 28px;
    margin-left: 24px;
    width: 28px;
  }

  .text_13 {
    width: 10px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 8px 0 0 9px;
  }

  .text_14 {
    width: 71px;
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(150, 149, 149, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 7px 0 0 8px;
  }

  .qwtx {
    width: 69px;
    height: 29px;
    background: #3C89FF;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 14px;
  }
</style>

<style>
  .search {
    .el-input__inner::placeholder {
      color: #000000;
    }

    /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder {
      color: #000000;
    }

    /* 火狐 */
    .el-input__inner:-moz-placeholder {
      color: #000000;
    }

    /*ie*/
    .el-input__inner:-ms-input-placeholder {
      color: #000000;
    }
  }
</style>
